ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳನ್ನು ಅಳವಡಿಸುವ ಮೂಲಕ ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಅಂತರ್ಗತ ವೆಬ್ ಅನುಭವಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. WCAG ಅನುಸರಣೆ ಮತ್ತು ಸುಧಾರಿತ ಉಪಯುಕ್ತತೆಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಕಲಿಯಿರಿ.
ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳು: ಅಗತ್ಯ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಪ್ರವೇಶಿಸುವಿಕೆ ಅವಶ್ಯಕತೆಗಳು
ಫಾರ್ಮ್‌ಗಳು ವೆಬ್‌ನ ಒಂದು ಮೂಲಭೂತ ಭಾಗವಾಗಿದೆ. ಸರಳ ಸಂಪರ್ಕ ಫಾರ್ಮ್‌ಗಳಿಂದ ಹಿಡಿದು ಸಂಕೀರ್ಣ ಇ-ಕಾಮರ್ಸ್ ಚೆಕ್‌ಔಟ್‌ಗಳವರೆಗೆ, ಅವು ಬಳಕೆದಾರರಿಗೆ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಕಳಪೆಯಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಫಾರ್ಮ್‌ಗಳು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಗಮನಾರ್ಹ ಅಡೆತಡೆಗಳನ್ನು ಸೃಷ್ಟಿಸಬಹುದು. ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್‌ಗಳನ್ನು ರಚಿಸುವಲ್ಲಿ ನಿರ್ಣಾಯಕ ಅಂಶವೆಂದರೆ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳ ಸರಿಯಾದ ಬಳಕೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ಫಾರ್ಮ್ ಲೇಬಲ್ ಪ್ರವೇಶಿಸುವಿಕೆ ಅವಶ್ಯಕತೆಗಳ ಸಮಗ್ರ ಅವಲೋಕನವನ್ನು ಒದಗಿಸುತ್ತದೆ, ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳು ಅವರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ ಎಲ್ಲರಿಗೂ ಬಳಸಲು ಯೋಗ್ಯವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳು ಏಕೆ ಮುಖ್ಯ?
ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳು ಹಲವಾರು ಕಾರಣಗಳಿಗಾಗಿ ಅತ್ಯಗತ್ಯ:
- ಉಪಯುಕ್ತತೆ: ಸ್ಪಷ್ಟ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಲೇಬಲ್‌ಗಳು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರತಿ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನ ಉದ್ದೇಶವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಒಟ್ಟಾರೆ ಉಪಯುಕ್ತತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
- ಪ್ರವೇಶಿಸುವಿಕೆ: ಲೇಬಲ್‌ಗಳು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ, ವಿಶೇಷವಾಗಿ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಅವಲಂಬಿಸಿರುವವರಿಗೆ ಅಗತ್ಯ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತವೆ. ಸರಿಯಾದ ಲೇಬಲ್‌ಗಳಿಲ್ಲದೆ, ಈ ಬಳಕೆದಾರರು ಫಾರ್ಮ್‌ಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗದಿರಬಹುದು.
- WCAG ಅನುಸರಣೆ: ವೆಬ್ ಕಂಟೆಂಟ್ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಗೈಡ್‌ಲೈನ್ಸ್ (WCAG) ಎಲ್ಲಾ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಸಂಬಂಧಿತ ಲೇಬಲ್‌ಗಳನ್ನು ಹೊಂದಿರಬೇಕೆಂದು ಬಯಸುತ್ತದೆ. ಈ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಪೂರೈಸುವುದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನೇಕ ನ್ಯಾಯವ್ಯಾಪ್ತಿಗಳಲ್ಲಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಕಾನೂನುಬದ್ಧವಾಗಿ ಅನುಸರಣೆಯಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ಎಸ್‌ಇಒ: ನೇರ ಶ್ರೇಯಾಂಕದ ಅಂಶವಲ್ಲದಿದ್ದರೂ, ಪ್ರವೇಶಿಸಬಹುದಾದ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಇದು ಪರೋಕ್ಷವಾಗಿ ಎಸ್‌ಇಒ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು.
ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳಿಗಾಗಿ WCAG ಅವಶ್ಯಕತೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
WCAG ಫಾರ್ಮ್ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿರ್ದಿಷ್ಟ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಪ್ರಮುಖ ಅವಶ್ಯಕತೆಗಳು ಇಲ್ಲಿವೆ:
WCAG 2.1 ಯಶಸ್ಸಿನ ಮಾನದಂಡ 1.1.1 ಪಠ್ಯೇತರ ವಿಷಯ (ಹಂತ A)
ಇದು ನೇರವಾಗಿ ಲೇಬಲ್‌ಗಳ ಬಗ್ಗೆ ಇಲ್ಲದಿದ್ದರೂ, ಈ ಮಾನದಂಡವು ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಕ್ಯಾಪ್ಚಾಗಳು ಮತ್ತು ಚಿತ್ರಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಎಲ್ಲಾ ಪಠ್ಯೇತರ ವಿಷಯಗಳಿಗೆ ಪಠ್ಯ ಪರ್ಯಾಯಗಳನ್ನು ಒದಗಿಸುವ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಒತ್ತಿಹೇಳುತ್ತದೆ. ಈ ಪರ್ಯಾಯಗಳಿಗೆ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸಲು ಸರಿಯಾಗಿ ಲೇಬಲ್ ಮಾಡಲಾದ ಫಾರ್ಮ್ ನಿರ್ಣಾಯಕವಾಗಿದೆ.
WCAG 2.1 ಯಶಸ್ಸಿನ ಮಾನದಂಡ 1.3.1 ಮಾಹಿತಿ ಮತ್ತು ಸಂಬಂಧಗಳು (ಹಂತ A)
ಪ್ರಸ್ತುತಿಯ ಮೂಲಕ ತಿಳಿಸಲಾದ ಮಾಹಿತಿ, ರಚನೆ ಮತ್ತು ಸಂಬಂಧಗಳು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ನಿರ್ಧರಿಸಲ್ಪಡಬೇಕು ಅಥವಾ ಪಠ್ಯದಲ್ಲಿ ಲಭ್ಯವಿರಬೇಕು. ಇದರರ್ಥ ಲೇಬಲ್ ಮತ್ತು ಅದರ ಅನುಗುಣವಾದ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ನಡುವಿನ ಸಂಬಂಧವನ್ನು HTML ಕೋಡ್‌ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು.
WCAG 2.1 ಯಶಸ್ಸಿನ ಮಾನದಂಡ 2.4.6 ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಲೇಬಲ್‌ಗಳು (ಹಂತ AA)
ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಲೇಬಲ್‌ಗಳು ವಿಷಯ ಅಥವಾ ಉದ್ದೇಶವನ್ನು ವಿವರಿಸುತ್ತವೆ. ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳಿಗೆ ವಿವರಣಾತ್ಮಕ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸುತ್ತವೆ, ಬಳಕೆದಾರರಿಗೆ ಫಾರ್ಮ್‌ನ ರಚನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಅದನ್ನು ನಿಖರವಾಗಿ ಪೂರ್ಣಗೊಳಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
WCAG 2.1 ಯಶಸ್ಸಿನ ಮಾನದಂಡ 3.3.2 ಲೇಬಲ್‌ಗಳು ಅಥವಾ ಸೂಚನೆಗಳು (ಹಂತ A)
ವಿಷಯಕ್ಕೆ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅಗತ್ಯವಿದ್ದಾಗ ಲೇಬಲ್‌ಗಳು ಅಥವಾ ಸೂಚನೆಗಳನ್ನು ಒದಗಿಸಲಾಗುತ್ತದೆ.
WCAG 2.1 ಯಶಸ್ಸಿನ ಮಾನದಂಡ 4.1.2 ಹೆಸರು, ಪಾತ್ರ, ಮೌಲ್ಯ (ಹಂತ A)
ಎಲ್ಲಾ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಘಟಕಗಳಿಗೆ (ಫಾರ್ಮ್ ಅಂಶಗಳು, ಲಿಂಕ್‌ಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಂದ ರಚಿಸಲಾದ ಘಟಕಗಳಿಗೆ ಸೀಮಿತವಾಗಿಲ್ಲ), ಹೆಸರು ಮತ್ತು ಪಾತ್ರವನ್ನು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ನಿರ್ಧರಿಸಬಹುದು; ಬಳಕೆದಾರರಿಂದ ಹೊಂದಿಸಬಹುದಾದ ಸ್ಥಿತಿಗಳು, ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳನ್ನು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಹೊಂದಿಸಬಹುದು; ಮತ್ತು ಈ ಐಟಂಗಳ ಬದಲಾವಣೆಗಳ ಅಧಿಸೂಚನೆಯು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಬಳಕೆದಾರ ಏಜೆಂಟ್‌ಗಳಿಗೆ ಲಭ್ಯವಿದೆ.
ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳನ್ನು ಅಳವಡಿಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳನ್ನು ರಚಿಸಲು ಹಲವಾರು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:
1. <label> ಅಂಶವನ್ನು ಬಳಸಿ
<label> ಅಂಶವು ಪಠ್ಯ ಲೇಬಲ್ ಅನ್ನು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸುವ ಪ್ರಾಥಮಿಕ ಮಾರ್ಗವಾಗಿದೆ. ಇದು ಲೇಬಲ್ ಮತ್ತು ನಿಯಂತ್ರಣದ ನಡುವೆ ಶಬ್ದಾರ್ಥ ಮತ್ತು ರಚನಾತ್ಮಕ ಸಂಪರ್ಕವನ್ನು ಒದಗಿಸುತ್ತದೆ. <label> ಅಂಶದ for ಗುಣಲಕ್ಷಣವು ಅನುಗುಣವಾದ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನ id ಗುಣಲಕ್ಷಣಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗಬೇಕು.
ಉದಾಹರಣೆ:
<label for="name">Name:</label>
<input type="text" id="name" name="name">
ತಪ್ಪು ಉದಾಹರಣೆ (ತಪ್ಪಿಸಿ):
<span>Name:</span>
<input type="text" id="name" name="name">
label ಬದಲಿಗೆ span ಅಂಶವನ್ನು ಬಳಸುವುದು ಅಗತ್ಯವಾದ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಸಂಬಂಧವನ್ನು ರಚಿಸುವುದಿಲ್ಲ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ಪ್ರವೇಶಿಸಲಾಗದಂತೆ ಮಾಡುತ್ತದೆ.
2. ಲೇಬಲ್‌ಗಳನ್ನು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳೊಂದಿಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಸಂಯೋಜಿಸಿ
ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ for ಮತ್ತು id ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಲೇಬಲ್ ಮತ್ತು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ನಡುವೆ ಸ್ಪಷ್ಟ ಮತ್ತು ಸ್ಪಷ್ಟವಾದ ಸಂಬಂಧವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
3. ಲೇಬಲ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಇರಿಸಿ
ಲೇಬಲ್‌ಗಳ ನಿಯೋಜನೆಯು ಉಪಯುಕ್ತತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಸಾಮಾನ್ಯವಾಗಿ, ಲೇಬಲ್‌ಗಳನ್ನು ಹೀಗೆ ಇರಿಸಬೇಕು:
- ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನ ಮೇಲೆ: ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಅತ್ಯಂತ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಆಯ್ಕೆಯಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಟೆಕ್ಸ್ಟ್ ಫೀಲ್ಡ್‌ಗಳು ಮತ್ತು ಟೆಕ್ಸ್ಟ್ ಏರಿಯಾಗಳಿಗಾಗಿ.
- ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನ ಎಡಕ್ಕೆ: ಸಾಮಾನ್ಯ, ಆದರೆ ದೃಷ್ಟಿ ದೋಷವಿರುವ ಬಳಕೆದಾರರಿಗೆ ಪುಟವನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡಲು ಕಷ್ಟವಾಗಬಹುದು.
- ರೇಡಿಯೋ ಬಟನ್‌ಗಳು ಮತ್ತು ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳಿಗಾಗಿ: ಲೇಬಲ್‌ಗಳನ್ನು ನಿಯಂತ್ರಣದ ಬಲಭಾಗದಲ್ಲಿ ಇರಿಸಬೇಕು.
ಲೇಬಲ್‌ಗಳನ್ನು ಇರಿಸುವಾಗ ಸಾಂಸ್ಕೃತಿಕ ರೂಢಿಗಳನ್ನು ಪರಿಗಣಿಸಿ. ಕೆಲವು ಭಾಷೆಗಳಲ್ಲಿ, ಲೇಬಲ್‌ಗಳನ್ನು ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ನಂತರ ಇರಿಸಲಾಗುತ್ತದೆ. ಈ ಆದ್ಯತೆಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಹೊಂದಿಸಿ.
4. ಸ್ಪಷ್ಟ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಲೇಬಲ್‌ಗಳನ್ನು ಒದಗಿಸಿ
ಲೇಬಲ್‌ಗಳು ಸಂಕ್ಷಿಪ್ತ, ವಿವರಣಾತ್ಮಕ ಮತ್ತು ಸುಲಭವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವಂತಿರಬೇಕು. ಬಳಕೆದಾರರನ್ನು ಗೊಂದಲಗೊಳಿಸಬಹುದಾದ ಪರಿಭಾಷೆ ಅಥವಾ ತಾಂತ್ರಿಕ ಪದಗಳನ್ನು ತಪ್ಪಿಸಿ. ಉದಾಹರಣೆಗೆ, "UserID," ಬದಲಿಗೆ "ಬಳಕೆದಾರಹೆಸರು" ಅಥವಾ "ಇಮೇಲ್ ವಿಳಾಸ" ಬಳಸಿ. ಸ್ಥಳೀಕರಣವನ್ನು ಪರಿಗಣಿಸಿ. ನಿಮ್ಮ ಲೇಬಲ್‌ಗಳು ತಮ್ಮ ಅರ್ಥವನ್ನು ಉಳಿಸಿಕೊಂಡು ವಿವಿಧ ಭಾಷೆಗಳಿಗೆ ಸುಲಭವಾಗಿ ಅನುವಾದಿಸಲ್ಪಡುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
5. ಅಗತ್ಯವಿದ್ದಾಗ ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ
ARIA (ಪ್ರವೇಶಿಸಬಹುದಾದ ಶ್ರೀಮಂತ ಇಂಟರ್ನೆಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು) ಗುಣಲಕ್ಷಣಗಳು ಫಾರ್ಮ್ ಅಂಶಗಳ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ. ಆದಾಗ್ಯೂ, ARIA ಅನ್ನು ವಿವೇಚನೆಯಿಂದ ಮತ್ತು ಸ್ಥಳೀಯ HTML ಅಂಶಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳು ಸಾಕಷ್ಟಿಲ್ಲದಿದ್ದಾಗ ಮಾತ್ರ ಬಳಸಿ.
- aria-label: ಗೋಚರ ಲೇಬಲ್ ಸಾಧ್ಯವಾಗದಿದ್ದಾಗ ಅಥವಾ ಪ್ರಾಯೋಗಿಕವಾಗಿಲ್ಲದಿದ್ದಾಗ ಲೇಬಲ್ ಒದಗಿಸಲು ಈ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ.
- aria-labelledby: ಲೇಬಲ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಪುಟದಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಂಶದ ID ಅನ್ನು ಉಲ್ಲೇಖಿಸಲು ಈ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ.
- aria-describedby: ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಾಗಿ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿ ಅಥವಾ ಸೂಚನೆಗಳನ್ನು ಒದಗಿಸಲು ಈ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ. ಸಂದರ್ಭವನ್ನು ಒದಗಿಸಲು ಅಥವಾ ಮೌಲ್ಯೀಕರಣ ನಿಯಮಗಳನ್ನು ವಿವರಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
aria-label ಬಳಸಿ ಉದಾಹರಣೆ:
<input type="search" aria-label="Search the website">
aria-labelledby ಬಳಸಿ ಉದಾಹರಣೆ:
<h2 id="newsletter-title">Newsletter Subscription</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Enter your email address">
6. ಸಂಬಂಧಿತ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು <fieldset> ಮತ್ತು <legend> ನೊಂದಿಗೆ ಗುಂಪು ಮಾಡಿ
<fieldset> ಅಂಶವು ಸಂಬಂಧಿತ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಗುಂಪು ಮಾಡುತ್ತದೆ, ಮತ್ತು <legend> ಅಂಶವು ಫೀಲ್ಡ್‌ಸೆಟ್‌ಗೆ ಶೀರ್ಷಿಕೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಫಾರ್ಮ್‌ನ ರಚನೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ವಿವಿಧ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳ ನಡುವಿನ ಸಂಬಂಧಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ:
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
7. ಸ್ಪಷ್ಟ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಿ
ಬಳಕೆದಾರರು ಫಾರ್ಮ್ ಅನ್ನು ಭರ್ತಿ ಮಾಡುವಾಗ ದೋಷಗಳನ್ನು ಮಾಡಿದಾಗ, ಏನು ತಪ್ಪಾಗಿದೆ ಮತ್ತು ದೋಷವನ್ನು ಹೇಗೆ ಸರಿಪಡಿಸುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಸ್ಪಷ್ಟ ಮತ್ತು ತಿಳಿವಳಿಕೆ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಿ. aria-describedby ನಂತಹ ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಈ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಅನುಗುಣವಾದ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ.
ಉದಾಹರಣೆ:
<label for="email">Email:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">ದಯವಿಟ್ಟು ಮಾನ್ಯವಾದ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ನಮೂದಿಸಿ.</span>
ದೋಷ ಸಂದೇಶವು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ವಿಭಿನ್ನವಾಗಿದೆ (ಉದಾ., ಬಣ್ಣ ಅಥವಾ ಐಕಾನ್‌ಗಳನ್ನು ಬಳಸಿ) ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
8. ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಬಳಸಿ
WCAG ಅವಶ್ಯಕತೆಗಳನ್ನು ಪೂರೈಸಲು ಲೇಬಲ್ ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣದ ನಡುವೆ ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಇದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವು ಕನಿಷ್ಟ ಅವಶ್ಯಕತೆಗಳನ್ನು ಪೂರೈಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ವಿಶ್ಲೇಷಕ ಸಾಧನವನ್ನು ಬಳಸಿ (ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ 4.5:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 3:1). ಇದು ಕಡಿಮೆ ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಲೇಬಲ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ಓದಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
9. ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
ಎಲ್ಲಾ ಫಾರ್ಮ್ ಅಂಶಗಳು ಕೀಬೋರ್ಡ್ ಒಂದನ್ನು ಬಳಸಿ ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ. ಬಳಕೆದಾರರು ಟ್ಯಾಬ್ ಕೀಯನ್ನು ಬಳಸಿಕೊಂಡು ಫಾರ್ಮ್ ಮೂಲಕ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಮತ್ತು ಸ್ಪೇಸ್‌ಬಾರ್ ಅಥವಾ ಎಂಟರ್ ಕೀಯನ್ನು ಬಳಸಿಕೊಂಡು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಸರಿಯಾದ ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳನ್ನು ಕೀಬೋರ್ಡ್‌ನೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ.
10. ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ
ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳು ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ ಅವುಗಳನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ (ಉದಾ., NVDA, JAWS, VoiceOver) ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸುವುದು. ಇದು ದೃಶ್ಯ ತಪಾಸಣೆಯ ಸಮಯದಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಕಾಣದ ಯಾವುದೇ ಪ್ರವೇಶಿಸುವಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಮೌಲ್ಯಯುತ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಡೆಯಲು ನಿಮ್ಮ ಪರೀಕ್ಷಾ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ವಿಕಲಾಂಗ ಬಳಕೆದಾರರನ್ನು ತೊಡಗಿಸಿಕೊಳ್ಳಿ.
ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್ ಲೇಬಲ್ ಅನುಷ್ಠಾನಗಳ ಉದಾಹರಣೆಗಳು
ಉದಾಹರಣೆ 1: ಸರಳ ಸಂಪರ್ಕ ಫಾರ್ಮ್ (ಅಂತರರಾಷ್ಟ್ರೀಯ ದೃಷ್ಟಿಕೋನ)
ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಸಂಪರ್ಕ ಫಾರ್ಮ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಲೇಬಲ್‌ಗಳು ಸ್ಪಷ್ಟ, ಸಂಕ್ಷಿಪ್ತ ಮತ್ತು ಸುಲಭವಾಗಿ ಅನುವಾದಿಸಲ್ಪಡುವಂತಿರಬೇಕು.
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email"><br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select Country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<option value="de">Germany</option>
<option value="fr">France</option>
<option value="jp">Japan</option>
<option value="au">Australia</option>
<!-- ಹೆಚ್ಚಿನ ದೇಶಗಳನ್ನು ಸೇರಿಸಿ -->
</select><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
ಸ್ಪಷ್ಟತೆಗಾಗಿ ಕೇವಲ "ಹೆಸರು" ಬದಲಿಗೆ "ಪೂರ್ಣ ಹೆಸರು" ಬಳಕೆಯನ್ನು ಗಮನಿಸಿ, ವಿಶೇಷವಾಗಿ ಕುಟುಂಬದ ಹೆಸರುಗಳು ಕೊಟ್ಟಿರುವ ಹೆಸರುಗಳಿಗಿಂತ ಮೊದಲು ಬರುವ ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ.
ಉದಾಹರಣೆ 2: ಇ-ಕಾಮರ್ಸ್ ಚೆಕ್‌ಔಟ್ ಫಾರ್ಮ್
ಇ-ಕಾಮರ್ಸ್ ಚೆಕ್‌ಔಟ್ ಫಾರ್ಮ್‌ಗಳಿಗೆ ಸಾಮಾನ್ಯವಾಗಿ ಸೂಕ್ಷ್ಮ ಮಾಹಿತಿಯ ಅಗತ್ಯವಿರುತ್ತದೆ. ನಂಬಿಕೆಯನ್ನು ನಿರ್ಮಿಸಲು ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸ್ಪಷ್ಟ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಸೂಚನೆಗಳು ನಿರ್ಣಾಯಕವಾಗಿವೆ.
<form>
<fieldset>
<legend>Shipping Address</legend>
<label for="shipping_name">Full Name:</label>
<input type="text" id="shipping_name" name="shipping_name"><br><br>
<label for="shipping_address">Address:</label>
<input type="text" id="shipping_address" name="shipping_address"><br><br>
<label for="shipping_city">City:</label>
<input type="text" id="shipping_city" name="shipping_city"><br><br>
<label for="shipping_zip">Postal/Zip Code:</label>
<input type="text" id="shipping_zip" name="shipping_zip"><br><br>
<label for="shipping_country">Country:</label>
<select id="shipping_country" name="shipping_country">
<option value="">Select Country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<!-- ಹೆಚ್ಚಿನ ದೇಶಗಳನ್ನು ಸೇರಿಸಿ -->
</select>
</fieldset>
<fieldset>
<legend>Payment Information</legend>
<label for="card_number">Credit Card Number:</label>
<input type="text" id="card_number" name="card_number"><br><br>
<label for="expiry_date">Expiry Date (MM/YY):</label>
<input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY"><br><br>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv"><br><br>
</fieldset>
<input type="submit" value="Place Order">
</form>
ಫೀಲ್ಡ್‌ಸೆಟ್‌ಗಳು ಮತ್ತು ಲೆಜೆಂಡ್‌ಗಳ ಬಳಕೆಯು ಫಾರ್ಮ್ ಅನ್ನು ತಾರ್ಕಿಕ ವಿಭಾಗಗಳಾಗಿ ಸ್ಪಷ್ಟವಾಗಿ ಸಂಘಟಿಸುತ್ತದೆ. ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವು ಹೆಚ್ಚುವರಿ ಮಾರ್ಗದರ್ಶನವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ಲೇಬಲ್‌ಗಳಿಗೆ ಬದಲಿಯಾಗಿ ಬಳಸಬಾರದು ಎಂಬುದನ್ನು ನೆನಪಿಡಿ.
ಉದಾಹರಣೆ 3: ARIA ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ನೋಂದಣಿ ಫಾರ್ಮ್
ಅಡ್ಡಹೆಸರು ಐಚ್ಛಿಕವಾಗಿರುವ ನೋಂದಣಿ ಫಾರ್ಮ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ನಾವು ಹೆಚ್ಚುವರಿ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸಬಹುದು.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="nickname">Nickname (Optional):</label>
<input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
<span id="nickname-info">ಈ ಅಡ್ಡಹೆಸರನ್ನು ಸಾರ್ವಜನಿಕವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.</span><br><br>
<input type="submit" value="Register">
</form>
aria-describedby ಗುಣಲಕ್ಷಣವು ಅಡ್ಡಹೆಸರು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ಸ್ಪ್ಯಾನ್ ಅಂಶಕ್ಕೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ, ಅದು ಅಡ್ಡಹೆಸರನ್ನು ಹೇಗೆ ಬಳಸಲಾಗುವುದು ಎಂಬುದರ ಕುರಿತು ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಫಾರ್ಮ್ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ಉಪಕರಣಗಳು
ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ಹಲವಾರು ಉಪಕರಣಗಳು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ:
- Accessibility Insights: ವೆಬ್ ಪುಟಗಳಲ್ಲಿನ ಪ್ರವೇಶಿಸುವಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ.
- WAVE (ವೆಬ್ ಪ್ರವೇಶಿಸುವಿಕೆ ಮೌಲ್ಯಮಾಪನ ಸಾಧನ): ಪ್ರವೇಶಿಸುವಿಕೆ ದೋಷಗಳಿಗಾಗಿ ವೆಬ್ ಪುಟಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡುವ ಆನ್‌ಲೈನ್ ಸಾಧನ.
- axe DevTools: ಸ್ವಯಂಚಾಲಿತ ಪ್ರವೇಶಿಸುವಿಕೆ ಪರೀಕ್ಷೆಯನ್ನು ನಿರ್ವಹಿಸುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ.
- ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು (NVDA, JAWS, VoiceOver): ಸ್ವಯಂಚಾಲಿತ ಪರೀಕ್ಷೆಯ ಮೂಲಕ ಸ್ಪಷ್ಟವಾಗಿ ಕಾಣದ ಪ್ರವೇಶಿಸುವಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸುವುದು ಅತ್ಯಗತ್ಯ.
ತೀರ್ಮಾನ
ಅಂತರ್ಗತ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳು ಅತ್ಯಗತ್ಯ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳು ಅವರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ ಎಲ್ಲರಿಗೂ ಬಳಸಲು ಯೋಗ್ಯವಾಗಿರುವುದನ್ನು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಪ್ರವೇಶಿಸುವಿಕೆಗೆ ಆದ್ಯತೆ ನೀಡುವುದು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಮಾತ್ರವಲ್ಲದೆ ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಒಟ್ಟಾರೆ ಉಪಯುಕ್ತತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಮೌಲ್ಯಯುತ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಡೆಯಲು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ನಿರಂತರವಾಗಿ ಸುಧಾರಿಸಲು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳನ್ನು ಸ್ಥಿರವಾಗಿ ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಪರೀಕ್ಷಾ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ವಿಕಲಾಂಗ ಬಳಕೆದಾರರನ್ನು ತೊಡಗಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ.
ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಕೇವಲ ಅನುಸರಣೆಯ ವಿಷಯವಲ್ಲ; ಇದು ಎಲ್ಲರಿಗೂ ಹೆಚ್ಚು ಅಂತರ್ಗತ ಮತ್ತು ಸಮಾನವಾದ ವೆಬ್ ಅನ್ನು ರಚಿಸುವ ಬಗ್ಗೆ. ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಾರ್ಮ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಹೂಡಿಕೆ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಅಂತರ್ಗತತೆಗೆ ಬದ್ಧತೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತೀರಿ ಮತ್ತು ಎಲ್ಲರಿಗೂ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತೀರಿ.